今天來說說react-beautiful-dnd
想推薦它，因為是Atlassian開發的，也許你可能沒聽過這是甚麼公司，
但有些工作經驗的應該多少有聽過或用過 Trello、Jira 或者SourceTree
基於這點理由，就比較不用擔心會有問題很多又沒人維護的問題
當然還有其他選擇react-dnd或react-draggable
也都是相當棒的套件，可以依據自己需求去使用

那就開始吧
先來安裝

npm i react-beautiful-dnd --save

如果有用ts 記得安裝types

npm i @types/react-beautiful-dnd

在來做點基礎的

import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';

type Item = {
  id: string;
  content: string;
};

const initialItems: Item[] = [
  { id: 'item-1', content: 'Item 1' },
  { id: 'item-2', content: 'Item 2' },
  { id: 'item-3', content: 'Item 3' },
  { id: 'item-4', content: 'Item 4' },
];

const DndCompnent: React.FC = () => {
  const [items, setItems] = useState(initialItems);
  const handleOnDragEnd = (result: DropResult) => {
    if (!result.destination) return;

    const newItems = Array.from(items);
    const [movedItem] = newItems.splice(result.source.index, 1);
    newItems.splice(result.destination.index, 0, movedItem);

    setItems(newItems);
  };

  return (
    <DragDropContext onDragEnd={handleOnDragEnd}>
      <Droppable droppableId="droppable-1">
        {(provided) => (
          <div
            {...provided.droppableProps}
            ref={provided.innerRef}
            style={{
              padding: '20px',
              width: '250px',
              minHeight: '200px',
              backgroundColor: '#f0f0f0',
            }}
          >
            {items.map((item, index) => (
              <Draggable key={item.id} draggableId={item.id} index={index}>
                {(provided) => (
                  <div
                    ref={provided.innerRef}
                    {...provided.draggableProps}
                    {...provided.dragHandleProps}
                    style={{
                      ...provided.draggableProps.style,
                      userSelect: 'none',
                      padding: '16px',
                      margin: '0 0 8px 0',
                      backgroundColor: '#fff',
                      border: '1px solid #ccc',
                      borderRadius: '4px',
                    }}
                  >
                    {item.content}
                  </div>
                )}
              </Draggable>
            ))}
            {provided.placeholder}
          </div>
        )}
      </Droppable>
    </DragDropContext>
  );
};

export default DndCompnent;

※要注意如果有用React.StrictMode記得移掉
不然會拖不動喔
例如我在Day5時 設定router的部分中
index.tsx

root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

這樣就要魔改

root.render(
  <>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </>
);

那麼 明天見